/*
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-02-07 14:53:11
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-06-15 18:24:28
 * @FilePath: \cxl-h5\src\components\select\index.ts
 */
import { render, h, Ref, ref, reactive } from 'vue'
import selectListVue from './List.vue'

export class Selector {
    //选择器距离页面顶部距离
    top: Ref<number | string> = ref('')
    //左边距离
    left: Ref<number | string> = ref('')
    //高度
    height: Ref<number | string> = ref('')
    //宽度
    width: Ref<number | string> = ref('')

    //是否激活select
    inputFocus = ref(false)
    //是否执行了render函数
    isStart = true
    //select 下来内容列表
    list: any[] = reactive([])
    //默认选择内容
    modelValue = ref('')
    //选择的是第几个
    selectIndex: Ref<number | string> = ref('')
    constructor() {}
    reset = () => {
        this.selectIndex.value = ''
        console.log('reset')
    }
    getTarget = (ref: any, callback: (arg: any) => void) => {
        this.top.value = 0
        this.left.value = 0
        this.height.value = ref.value.offsetHeight
        this.width.value = ref.value.offsetWidth

        if (this.isStart) {
            this.isStart = false
            render(
                h(selectListVue, {
                    top: Number(this.top.value) + Number(this.height.value),
                    left: this.left.value,
                    width: this.width.value,
                    visible: this.inputFocus,
                    modelValue: this.modelValue,
                    selectIndex: this.selectIndex,
                    onSelect: (index: number) => {
                        // this.modelValue.value = this.list[index].name
                        this.selectIndex.value = index
                        callback(this.list[index])
                    },
                    list: this.list
                }),
                ref.value
            )
        }
    }
}
